<template>
  <div class="sampleCp" @click="toSampleDetail">
    <img :src="sample.mainImage">
    <div class="cancel-btn" v-if="isUserPage">
      <i></i>
    </div>
  </div>
</template>

<script>
import { } from 'vux'

export default {
  props: {
    sample: {
      type: Object
    },
    isUserPage: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data () {
    return {
    }
  },
  methods: {
    toSampleDetail () {
      this.$router.push({name: 'sample-detail', params: {sampleId: this.sample.id}})
    }
  }
}
</script>

<style lang="less">
.sampleCp {
  position: relative;
  width: 92vw;
  height: 30vw;
  margin: 15px auto 0 auto;
  border-radius: 10px;
  box-shadow: 0 5px 15px @shadow-color;
  img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
  .cancel-btn {
    position: absolute;
    right: -8px;
    top: 15px;
    height: 30px;
    width: 30px;
    border-radius: 5px;
    background: @btn-color;
    box-shadow: 0 5px 15px @btn-shadow-color;
    i {
      display: block;
      width: 24px;
      height: 24px;
      background: url('../../assets/unlike.png') no-repeat;
      background-size: 25px;
      margin: 3px 0 0 3px;
    }
  }
}
</style>
